<template>
    <div class="source-wrap scene-edit-box">
		  <ClassifyTree @handleNodeClick="handleNodeClick"></ClassifyTree>
		  
		  <div class="top-title">
				<span>底板列表</span>
				<div>
					<input type="text"  v-model="keywords" placeholder="请输入名称检索" @keydown="handleSearch"/>
				</div> 
		  </div>
		  
		  <div class="source-box">
			 <div class="list-wrap">
				 <div class="float scroll min" style="height: 100%;">
					<el-scrollbar>
						<ul class="card-ul">
						  <li title="创建底板" @click="editDialogRef.openDialog(null,'add')">
								<div class="add">
									<el-icon>
										<Plus />
									</el-icon>
								</div>
						  </li>
						  <li v-for=" project in tableData">
							  <div class="top">
									<img  :src="project.url"/>
									<div class="img-mask">
										<div class="opear">
											<p @click="handleCreateScene(project)">创建场景</p>
											<span class="menu-col-group" >
												<span class="menu-col" v-hasPerm="['admin:add']">
													<el-icon class="icon" @click="editDialogRef.openDialog(project,'edit')"><EditPen /></el-icon>
													<span class="hidden">编辑</span>
												</span>
												<span class="menu-col" v-hasPerm="['admin:add']">
													<el-icon class="icon" @click="handleDelete(project)"><Delete /></el-icon>
													<span class="hidden" >删除</span>
												</span>
												<span class="menu-col" v-hasPerm="['admin:add','group:add']"> 
													<el-icon class="icon" @click="accreditDialog.openDialog(project)"><User /></el-icon>
													<span class="hidden">授权</span>
												</span>
												
												<span class="menu-col" v-hasPerm="['admin:add','group:add']" v-show="project.status=='-1'">
													<el-icon class="icon" @click="handleRelease(project)"><Share /></el-icon>
													<span class="hidden">发布</span>
												</span>
											</span>
										</div>
									</div>
							  </div>
							  <div class="bottom">
								  <span>{{project.name}}</span>
							  </div>
						  </li>
						</ul>
					</el-scrollbar>
				</div>
				<div class="list-paging-box" v-show="_totalPage>1">
					<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
				</div>
			  </div>
		  </div>
		  
		<EditDialog ref="editDialogRef" @closeDialog="closed"></EditDialog>
		<AccreditDialog ref="accreditDialog"></AccreditDialog>
		<APIForCustom ref="customAPIDialogRef"></APIForCustom>
  </div>
  
  

</template>
<script lang="ts" setup>
 	import {
	  Plus,Delete,EditPen,Share,User
	} from '@element-plus/icons-vue' 
	import ClassifyTree from "./components/ClassifyTree.vue";
	import AccreditDialog from "./components/AccreditDialog.vue";
	import APIForCustom from "./components/APIForCustom.vue";
	import EditDialog from "./components/EditDialog.vue";
	import {useRouter } from "vue-router";
	
	import { listForProject,deleteForProject,releaseForProject,createForScene} from "@/api/project";
	import { ref } from 'vue'
	const router = useRouter();
	const keywords=ref('');
	const classifyId=ref('');
	
	const tableData=ref([]);
	const loading = ref(false);
	const editDialogRef=ref();
	const accreditDialog=ref();
	const customAPIDialogRef=ref();
	
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	
	const currentChange=(cur:number)=>{
		_cur.value= cur
		load();
	}
	
	const load=()=>{
		loading.value=true;
		listForProject({
			cur:_cur.value,
			classifyId:classifyId.value?classifyId.value:'-1',
			keywords:keywords.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			 const _data=result
			_data.list.forEach(item => {
			  item['url']=import.meta.env.VITE_APP_BASE_API+'/api/v1/thumbnail/'+item.id+"?"+ new Date().getTime()
			})
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleNodeClick=(node)=>{
		classifyId.value=node.id;
		load();
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const closed=(e)=>{
		keywords.value='';
		classifyId.value=e.classifyId;
		load();
	}
	
	
	const handleCreateScene=(row:object)=>{
		
		if(row.status=='-1'){
			ElMessage.warning("请先发布.")
			return
		}
		
		ElMessageBox.confirm("确认据["+row.name+"]底板创建场景吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  createForScene(row)
			  .then(() => {
				ElMessage.success("成功");
				router.push({ path: '/scene/scene'});
				console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消"));
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]底板吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  
			  loading.value=true;
			  deleteForProject({
			  	id:row.id
			  })
			  .then(() => {
				keywords.value='';
				classifyId.value=row.classifyId;
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	
	const handleRelease=(row :object)=>{
		ElMessageBox.confirm("确认发布["+row.name+"]底板吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  
			  loading.value=true;
			  releaseForProject({
			  	id:row.id
			  })
			  .then(() => {
				keywords.value='';
				classifyId.value=row.classifyId;
				load();
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	
	onMounted(() => {
		load();
	});
	onBeforeUnmount(() => {
		//editDialogRef.value.unmount();
	});
	
</script>
<style scoped>
</style>